<template>
  <div>
    <el-row>
      <el-col :span="22">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>HPC</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="small" class="addBtn" @click="addHpc">添加HPC</el-button>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <!-- HPC信息区域 -->
      <el-row type="flex" class="row-bg" justify="space-between">
				<el-col :span="2">
					<el-button type="primary" @click="addDialogVisible=true" >{{addbtn}}</el-button>
				</el-col>
		</el-row>

    <el-table :data="hpclist" :border='false' stripe :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="物理机总数" show-overflow-tooltip>
            <template slot-scope="scope">
                <div>{{scope.row.userName}}</div>
            </template>
        </el-table-column>
        <el-table-column label="HBA存储容量">
            <template slot-scope="scope">
                <div>{{scope.row.userType}}</div>
            </template>
        </el-table-column>
        <el-table-column label="NAS存储容量">
            <template slot-scope="scope">
                <div>{{scope.row.partitionName}}</div>
            </template>
        </el-table-column>
        <el-table-column label="OSS存储容量">
            <template slot-scope="scope">
                <div>{{scope.row.useNode}}节点/ {{scope.row.useCpu}}万核时/ {{scope.row.useStorage}}TB</div>
            </template>
        </el-table-column>
        <el-table-column label="电信带宽">
            <template slot-scope="scope">
                <div>{{scope.row.surplusNode}}节点/ {{scope.row.surplusCpu}}万核时/ {{scope.row.surplusStorage}}TB</div>
            </template>
        </el-table-column>
        <el-table-column label="联通带宽">
            <template slot-scope="scope">
                <div>{{scope.row.partitionName}}</div>
            </template>
        </el-table-column>
        <el-table-column label="移动带宽">
            <template slot-scope="scope">
                <div>{{scope.row.partitionName}}</div>
            </template>
        </el-table-column>
        <el-table-column label="虚拟机总数">
            <template slot-scope="scope">
                <div>{{scope.row.partitionName}}</div>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
                <el-button type="info" size="small" plain @click="check(scope.row)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
      <el-pagination :current-page="queryInfo.pagenum" :page-sizes="[10,50,100]" :page-size="queryInfo.pagesize" :total="total"
			        layout="total, sizes, prev, pager, next, jumper" background >
			</el-pagination>
    </el-card>

    <!-- <add-hpc ref="AddHpc"></add-hpc>
    <contract-dialog ref="ContractDialog" v-bind:message='this.tableInfo'></contract-dialog> -->
  </div>
</template>

<script>
// import ContractDialog from './components/ContractDialog';
// import AddHpc from './components/AddHpc'
export default {
  data() {
    return {
      activeName: '1',
      queryInfo: {
        pagenum: 1,
        pagesize: 2,
      },
      hpclist: [
        // { id: '44170dd29339ddd0b0caa0d1315e973a',userName: 'test',userType: '包节点',partitionName: 'eee',
        // useNode: '2',surplusNode: '1',useCpu: '2',surplusCpu: '1',useStorage: '2',surplusStorage: '1',
        // contractCode: '222',contractName: '22',projectPerson: 'test',contractContent: '222',contractBeginTime: '2021-08-24 11:21:00',
        // contractEndTime: '2021-09-24 11:21:00',contractPrice: '222',createTime: '2021-08-24 11:21:00'
        // },
        // { id: '44170dd29339dd',userName: 'test',userType: '包核时',partitionName: 'eee',
        // useNode: '2',surplusNode: '1',useCpu: '2',surplusCpu: '0',useStorage: '2',surplusStorage: '1',
        // contractCode: '222',contractName: '22',projectPerson: 'test',contractContent: '222',contractBeginTime: '2021-08-24 11:21:00',
        // contractEndTime: '2021-12-24 11:21:00',contractPrice: '222',createTime: '2021-08-24 11:21:00'
        // }
      ],
      total: 0,
      tableInfo: [],
      addbtn: '添加HPC'
    };
  },
  created() {
      this.getList();
  },
  components: {
    // ContractDialog,
    // AddHpc,
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    addHpc(){
        this.$refs['AddHpc'].isShow = true;
    },
    async getList() {
      const { data: res } = await this.$http.get("hpc/list");
      if (res.code !== 200) {
        return this.$message.error("获取数据失败！");
      }
      this.total = res.data.totalPage;
      this.queryInfo.pagenum = res.data.currPage;
      this.queryInfo.pagesize = res.data.pageSize;
      this.hpclist = res.data.list;
      // this.total = 2;
      // this.queryInfo.pagenum = 1;
      // this.queryInfo.pagesize = 10;
      let newTime = new Date();
      for(let i = 0; i < this.hpclist.length; i++){
          if(this.hpclist[i].userType == '包节点'){
              if( newTime > this.hpclist[i].contractEndTime){
                  this.hpclist[i].status = false;
              }else{
                  this.hpclist[i].status = true;
              }
          }else{
              if( this.hpclist[i].surplusCpu <= 0 ){
                  this.hpclist[i].status = false;
              }else{
                  this.hpclist[i].status = true;
              }
          }
      }
      console.log(this.hpclist);
    },
  },
};
</script>

<style lang="less" scoped>
</style>